<template>
  <div>
    <MyBreadCrumb
      title="轮播管理"
      path="banner"
    ></MyBreadCrumb>
    <el-carousel
      :interval="4000"
      type="card"
    >
      <el-carousel-item
        v-for="item in srcList"
        :key="item"
      >
        <el-image
          :src="item"
          :preview-src-list="srcList"
        >
        </el-image>
      </el-carousel-item>
    </el-carousel>
    <el-button
      type="success"
      @click="add"
    >添加轮播</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      border
    >
      <el-table-column
        prop="id"
        label="#"
        align="center"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="图片描述"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="轮播图"
        align="center"
      >
        <template slot-scope="scope">
          <!-- <img
            :src="scope.row.picUrl"
            style="width:200px;"
            alt=""
          > -->
          <el-image
            style="width:200px;"
            :src="scope.row.picUrl"
            :preview-src-list="srcList"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-popconfirm
            title="确认删除商品吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button
              size="mini"
              type="danger"
              slot="reference"
            >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加弹出框 -->
    <el-dialog
      :title="formStatus?'添加新轮播':'编辑修改当前轮播'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="form">
        <el-form-item
          label="图片描述"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 预览上传的图片 -->
        <el-image
          :src="this.bannerUrl"
          v-if="this.bannerUrl!==''"
          style="width:50%"
        ></el-image>
        <!-- 上传文件框 -->
        <!-- action 上传地址 -->
        <!-- name 服务端接口接收的上传文件的名称 -->
        <el-upload
          class="upload-demo"
          drag
          action="http://127.0.0.1:5000/api/v1/upload"
          name="filename"
          multiple
          :on-success="handleUploadSuccess"
          :on-remove="handleUploadRemove"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <el-form-item
          label="图片地址"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.picUrl"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="save"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import url from '@/config/url'
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 弹出框是否打开
      dialogFormVisible: false,
      // 表单的数据值
      form: {
        name: '',
        picUrl: ''
      },
      formLabelWidth: '120px',
      // 上传后轮播图的地址
      bannerUrl: '',
      // 设置一个状态来判断是添加表单[true]还是修改表单[false]
      formStatus: true
    }
  },
  computed: {
    srcList() {
      // map遍历返回的结果是一个数组 需要获取的数据就是图片地址的数组列表
      return this.tableData.map((item) => item.picUrl)
    }
  },
  created() {
    // 加载请求
    this.loadData()
  },
  methods: {
    // 文件上传成功调用
    handleUploadSuccess(res, file, fileList) {
      console.log(res)
      if (res.code === 0) {
        this.bannerUrl = 'http://127.0.0.1:5000/static/img/' + res.data.filename
        this.form.picUrl = this.bannerUrl
      }
    },
    // 上传删除时处理
    handleUploadRemove(file, fileList) {
      // console.log(file, fileList)
      if (file) {
        this.bannerUrl = ''
        this.form.picUrl = ''
      }
    },
    // 编辑
    handleEdit(index, row) {
      // 开启弹出框
      this.dialogFormVisible = true
      // 将当前数据赋值给表单
      this.form = row
      // 将图片进行预览展示
      this.bannerUrl = row.picUrl
      // 修改表单的状态为编辑表单修改表单
      this.formStatus = false
    },
    // 添加
    add() {
      // 显示弹出框
      this.dialogFormVisible = true
    },
    // 保存数据
    save() {
      // 通过表单当前的业务逻辑状态
      if (this.formStatus) {
        // 添加保存
        this.$http.post(url.banner, this.form).then((res) => {
          // 请求完毕后 关闭弹出框
          this.dialogFormVisible = false
          console.log(res)
          if (res.data.id) {
            this.$message({
              type: 'success',
              message: '轮播添加成功',
              duration: 700
            })
            window.location.reload()
          } else {
            this.$message({
              type: 'error',
              message: '轮播添加失败',
              duration: 700
            })
          }
        })
      } else {
        // 修改保存
        this.$http
          .put(url.banner + '/' + this.form.id, this.form)
          .then((res) => {
            // 请求完毕后 关闭弹出框
            this.dialogFormVisible = false
            console.log(res)
            if (res.data.id) {
              this.$message({
                type: 'success',
                message: '轮播修改成功',
                duration: 700
              })
              window.location.reload()
            } else {
              this.$message({
                type: 'error',
                message: '轮播修改失败',
                duration: 700
              })
            }
          })
      }
    },
    // 删除
    handleDelete(index, row) {
      this.$http.delete(url.banner + '/' + row.id).then((res) => {
        this.$message({
          type: 'success',
          message: '轮播删除成功',
          duration: 700
        })
        window.location.reload()
      })
    },
    // 请求获取轮播图数据
    loadData() {
      this.$http.get(url.banner).then((res) => {
        this.tableData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep(.el-dialog) {
  width: 25%;
}
::v-deep(.el-form) {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>